import React from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
import { connect } from 'dva';
import {getAgentsId,MY_HOST} from '../../../settings'

@connect(({ banner }) => ({
  banner
}))
export default class HomeBanner extends React.Component {
  componentDidMount(){
    const { dispatch } = this.props
    this.iList = []
        dispatch({
            type: 'banner/selbanner',
            payload: {agentsId:getAgentsId()},
        })
  }

  iList = [{imgUrl:"./img/home_img1.png",linkUrl:MY_HOST}]
 render() {
      let imgList = this.iList
      console.log("轮播")
      console.log(this.props.banner.bannerList)
      if(this.props.banner.bannerList){
        this.props.banner.bannerList.forEach((banner,index) => {
          if(index <= 5) {
            imgList.push({imgUrl:banner.imgUrl,linkUrl:banner.linkUrl})
          }
        });
        if(this.props.banner.bannerList.length === 0){
          imgList.push({imgUrl:"./img/home_img1.png",linkUrl:MY_HOST})
        }
      }else{
        imgList.push({imgUrl:"./img/home_img1.png",linkUrl:MY_HOST})
      }
      console.log(imgList)

     return (
      <WingBlank>
        <Carousel
          autoplay={true}
          infinite
          //beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          //afterChange={index => console.log('slide to', index)}
        >
          {imgList.map((item,i) => (
            <a
              key={i}
              href={item.linkUrl}
              style={{ display: 'inline-block', width: '100%', height: '2.4rem' }}
            >
              <img
                src={item.imgUrl}
                alt=""
                style={{ width: '100%', verticalAlign: 'top',height: '2.4rem' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
     )
 }




}
